<template>
    <div class="send_word">
        <VueEmoji @input="onInput" :value="textarea" width="100%" height="0" maxlength="30" show-word-limit
            style="text-align: left;" />
        <div class="publish clearFix">
            <div class="choice">
                <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
                    <el-button slot="trigger" type="text">
                        <!-- <i style="font-size: 20px;" class="el-icon-picture"></i> -->
                    </el-button>
                </el-upload>
            </div>
            <div class="meanwhile" v-if="false">
                <div>
                    <el-checkbox v-model="checked1">同时评论给<span>张斌</span></el-checkbox>
                </div>
                <div style="margin-top: 4px;">
                    <el-checkbox v-model="checked2">同时评论给原文作者<span>崔皓月</span></el-checkbox>
                </div>
            </div>
            <div class="publish_btn ">
                <span v-if="false">
                    <el-checkbox v-model="checked2">同时转发到我的空间</el-checkbox>
                </span>
                <el-select v-model="value" v-if="false" placeholder="请选择" style="margin-right: 20px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-button size="small" type="primary" @click="submitUpload">发表</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import VueEmoji from 'emoji-vue'
    export default {
        props:['data'],
        components: {
            VueEmoji
        },
        computed: {
            ...mapState({
                // 权限列表
                permissionArr: state => state.commonModule.permissionArr,
                // 用户详细信息
                userInfo: state => state.userModule.userInfo,
            })
        },
        data() {
            return {
                textarea: '',
                fileList: [],
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                checked1: false,
                checked2: false,
            }
        },
        methods: {
            submitUpload() {
                if(this.textarea !=''){
                    this.$store.dispatch('articleModule/articleTransmit',{
                        content: this.textarea,
                        id: this.data.id,
                        to: 1,
                        urls: "",
                        userid: this.userInfo.id
                    }).then(res =>{
                        if(res.data.code ==200){
                            this.$message.success('转发成功')
                            this.$emit('closeTransmit')
                        }
                    })
                }else{
                    this.$message.warning("转发备注不能为空！")
                }
            },
            handleRemove(file, fileList) {
            },
            handlePreview(file) {
            },
            // 表情
            onInput(event) {
                this.textarea = event.data;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .send_word {
        box-sizing: border-box;
        padding: 5px;

        .publish {
            box-sizing: border-box;
            padding-top: 10px;

            .emoticon_warp {
                float: left;
            }

            .choice {
                float: left;
                /*margin-left: 20px;*/
                text-align: left;
            }

            .publish_btn {
                float: right;
                font-size: 14px;
                color: #909399;
                margin-top: 8px;

                span {
                    margin-right: 20px;
                }
            }

            .meanwhile {
                float: left;
                margin-left: 20px;
                margin-top: 12px;
                text-align: left;

                span {
                    margin-left: 20px;
                }
            }
        }
    }

    .clearFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }

    /*.emoji-picker-container{*/
    /*    width: 100%;*/
    /*}*/
    /*.emoji-wysiwyg-editor{*/
    /*    width: 100%;*/
    /*    height: 90px;*/
    /*    text-align: left;*/
    /*    box-sizing: border-box;*/
    /*    padding-right: 0;*/
    /*}*/
</style>